<template>
    <div>
        <!-- 导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <!-- :to="{ path: '/' }" -->
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br />
        <!-- 添加角色和表格部分 -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-button type="primary">添加角色</el-button>
                </el-col>
            </el-row>
            <!-- 表格展示 -->
            <el-table :data="rolesList" border stripe style="width: 100%" height="400px">
                <el-table-column type="expand" label="#">
                    <template slot-scope="{ row }">
                        <el-row v-for="(item1, i1) in row.children" :class="[i1 == 0 ? 'bdtop' : 'vcenter']"
                            :key="item1.id">
                            <el-col :span="5">
                                <el-tag type="primary" closable>{{ item1.authName }}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="19">
                                <el-row :class="[i2 == 0 ? 'bdtop' : 'vcenter']" v-for="(item2, i2) in item1.children"
                                    :key="item2.id">
                                    <el-col :span="6">
                                        <el-tag type="primary" closable>{{
                                            item2.authName
                                        }}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tag v-for="item3 in item2.children" :key="item3.id" type="primary" closable>{{
                                            item3.authName }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="#"> </el-table-column>
                <el-table-column prop="roleName" label="角色名称"> </el-table-column>
                <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{ row }">
                        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                        <el-button type="warning" icon="el-icon-setting" @click="setRightsHandle(row)"
                            size="mini">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 权限 分配弹框 -->
        <!--  :default-expanded-keys="[2, 3]"  :default-checked-keys="[5]" -->
        <el-dialog title="权限分配" :visible.sync="setRightsVisible" width="50%" @close="closeRights">
            <el-tree :data="rightsList" show-checkbox node-key="id" 
                ref="treeRef"
            :default-checked-keys="defKeys" 
            default-expand-all :props="defaultProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeRights">取 消</el-button>
                <el-button type="primary" @click="confirmSetRgihts">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getRoles, getRights , setRights } from "@/api/roles.js";
export default {
    name: "roles-com",
    data() {
        return {
            rolesList: [],
            setRightsVisible: false,//控制 权限分配的弹框
            roleId: '',//用户id
            rightsList: [],//所有的权限列表     
            defaultProps: {
                label: "authName",
                children: "children"
            },
            defKeys:[]
        };
    },
    created() {
        this.getRoles();
    },
    methods: {
        // 请求 权限列表数据
        async getRoles() {
            let {
                data: { data, meta },
            } = await getRoles();
            if (meta.status != 200) return this.$message("请求失败!");
            this.rolesList = data;
        },
        async setRightsHandle(row) {
            let { data: { data, meta } } = await getRights()
            if (meta.status != 200) return this.$message("权限列表请求失败!")
            this.rightsList = data//请求成功!
            console.log(data, meta);
            
            this.getLeafKeys(row , this.defKeys )
            console.log(this.defKeys);
            this.roleId = row.id
            this.setRightsVisible = true
        },
        // 获取已选中的三级权限的id
        getLeafKeys(node,arr){ // node 权限列表 arr空数组
            if(!node.children){
                return arr.push(node.id)
            }
            node.children.forEach(item =>  this.getLeafKeys(item,arr))
        },
        closeRights(){
            this. defKeys = []
            this.setRightsVisible = false
        },
       async confirmSetRgihts(){
            //            全选的id                             半选的id
            const keys = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
            console.log(keys)
            const idStr = keys.join(',')
            let {data:{meta}} = await setRights({rids:idStr} ,this.roleId )
            if(meta.status!=200) return this.$message("设置权限成功!")
            this.$message.success("设置权限成功!")
            this.setRightsVisible = false
            this. defKeys = []
            this.getRoles()//更新数据
        }
    },
};
</script>
<style scoped lang="scss">
::v-deep .el-breadcrumb__inner {
    font-size: 12px !important;
}

.bdtop {
    border-bottom: 1px solid #eee;
    margin: 5px 0 5px 0;
}

.vcenter {
    display: flex;
    align-items: center;
}
</style>
